<template>
  <div class="product">
      <div :class="`product-list ${typeStyle}`" v-for="item in dataList" :key="item.id"  @click="handlerClick(item)">
        <div
          class="images" :style="{ backgroundImage: `url(${item.imageUrl})` }">
          <!-- <img :src="item.imageUrl" alt=""> -->
          <div class="status-box">{{ item.statusDesc }}</div>
          <div class="content_box">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-desc">{{ item.desc }}</div>
            <div class="info-box">
              <img src="" alt="">
              <div class="item-name">{{}}</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  props: {
    typeStyle: {
      type: String,
      default: 'rush'
    },
    dataList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  components: {
  },
  methods: {

    handlerClick (item) {
      this.$emit('click', item)
    }
  },
  mounted () {

  }
}
</script>

<style lang="less" scoped>
.product {
  .product-list {
    display: flex;
    padding: 0 16px;
    &.card {
      margin-bottom: 30px;
      flex-direction: column;
      .images {
        padding: 15px;
        box-sizing: border-box;
        width: 100%;
        height: 193px;
        position: relative;
        border-radius:10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        img {
          width: 100%;
          border-radius:10px;
        }

        .status-box {
          font-size: 14px;
          background: rgba(255, 255, 255, 0.2);
          height: 34px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 30px;
          color: #ffffff;
          display: inline-block;
          padding: 0 15px;
          line-height: 34px;
        }

        .content_box {
          .item-title {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
